<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<title>海苔商城</title>
<link rel="stylesheet" href="../css/shop/detail.css" type="text/css"/>
</head>

<body>
<div class="wrap">
    <div class="detail-top bg-white">
        <div class="banner">
            <img src="../images/center_02.jpg" class="pic" width="100%" />
            <div class="banner-cover">
                <h1>这蠕是标题文字哦，可以显示两排，反正是要全部显示完全的</h1>
                <h4><span>￥1999</span></h4>
                <div class="foot">
                    <a href="javascript:;" class="on"><i class="icon like-icon"></i> 喜欢</a>
                    <a href="javascript:;" class="on"><i class="icon had-icon"></i> 已有</a>
                </div>
            </div>
        </div>
        <div class="top-info">
            <div class="info-top">
                <span class="time"><i class="icon time-icon"></i> 更新日期：1个月</span>
                <span class="only"><i class="icon only-icon"></i> 仅剩252件</span>
            </div>
            <div class="buy-user-list">
                <a href="javascript:;" class="btn yellow-btn">问买过的人>></a>
                <div class="cont">
                    <span class="first-user"><img src="../images/default_tx.png"/> </span>
                    <span><img src="../images/default_tx.png" /> </span>
                    <span><img src="../images/default_tx.png" /> </span>
                    <span><img src="../images/default_tx.png" /> </span>
                    <span><img src="../images/default_tx.png" /> </span>
                    <span class="num">152人</span>
                </div>
            </div>
        </div>
    </div>
    <div class="branch box">
        <div class="index-bar">
            <a href="#" class="more"></a>
            <h2>品牌故事</h2>
        </div>
        <div class="cont">
            <a href="#">
                <img src="../images/logo.png" class="logo" />
                <p>这里是品牌的简介这里是品牌的简介这里是品牌的简介这里是品牌的简介这里是品牌的简介这里是品这里是品牌的简介这里是品牌的简介这</p>
            </a>
        </div>
    </div>
    <div class="goods-detail box">
        <div class="activity">
            <div class="item">
                <span class="label">满减</span>
                满99.00元再加10.00元即可参与满减活动加10.00元即可参与满减活动
            </div>

        </div>
        <div class="goods-introduction">
            <div class="bar">
                <h3>商品说明</h3>
            </div>
            <div class="cont" id="mainDesc">
                这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介这里是文字简介
                <img src="../images/index_sub_07.png" />
            </div>
            <div class="mt10 tc">
                <a href="javascript:;">
                    <i class="icon arrow-down-icon"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="box">
        <div class="index-bar">
            <a href="#" class="more"></a>
            <h2>网友评论</h2>
        </div>
        <div class="cont">
            <div class="comment-list">
                <div class="comment-item">
                    <a href="#">
                        <img src="../images/default_tx.png" class="tx" />
                        <div class="fix">
                            <img src="../images/logo.png" class="pic" />
                            <p class="desc">
                                这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了
                            </p>
                        </div>

                    </a>
                </div>
                <div class="comment-item">
                    <a href="#">
                        <img src="../images/default_tx.png" class="tx" />
                        <div class="fix">
                            <img src="../images/logo.png" class="pic" />
                            <p class="desc">
                                这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了这里是评论的文字介绍了
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="box article">
        <div class="index-bar">
            <a href="#" class="more"></a>
            <h2>文章收录</h2>
        </div>
        <div class="cont">
            <div class="article-list">
                <a href="#">
                    <div class="pic">
                        <img src="../images/detail_09.jpg" class="img" />
                        <img src="../images/play_icon.png" class="play-icon" />
                        <div class="foot">
                            <span class="ml10">23432次播放</span>
                            <span>03:34</span>
                            <div class="tx">
                                <img src="../images/default_tx.png" />
                                等到下线
                            </div>
                        </div>
                    </div>
                    <p class="tit ell">
                        这里是文章 标题，超过了一排就要截取
                    </p>
                </a>
            </div>
            <div class="article-list">
                <a href="#">
                    <div class="pic">
                        <img src="../images/detail_09.jpg" class="img" />
                        <img src="../images/play_icon.png" class="play-icon" />
                        <div class="foot">
                            <span class="ml10">23432次播放</span>
                            <span>03:34</span>
                            <div class="tx">
                                <img src="../images/default_tx.png" />
                                等到下线
                            </div>
                        </div>
                    </div>
                    <p class="tit ell">
                        这里是文章 标题，超过了一排就要截取
                    </p>
                </a>
            </div>
        </div>
    </div>
    <div class="box article">
        <div class="index-bar">
            <a href="#" class="more"></a>
            <h2>相关商品</h2>
        </div>
        <div class="cont goods-collection">
            <div class="list">
                <ul class="fix">
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic">
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic">
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic">
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic">
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic">
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../images/share_logo.png" class="pic">
                            <h4 class="tit ell">双肩包Hkj电脑</h4>
                            <p class="desc ell">这货的文字还有点长啊</p>
                            <p class="price">￥270</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="h60"></div>
<footer class="fix-footer">
    <ul>
        <li class="im"><a href="#"><i class="icon im-icon"></i>找客服 </a> </li>
        <li class="car"><a href="#"><i class="icon car-icon"></i>购物车<span class="num">10</span></a> </li>
        <!--<li class="add-car"><a href="#">加入购物车 </a> </li>
        <li class="buy-btn"><a href="#">立即购买</a> </li>-->
        <li class="where-buy">
            <a href="#">问问哪里买得到 <i class="more arrow-right-icon"></i> </a>
        </li>
    </ul>
</footer>
<section class="buy-page dn">
    <div class="buy-info">
        <a href="javascript:;" class="icon close-icon"></a>
        <header>
            <img src="../images/logo.png" class="goods-pic" />
            <h5 class="tit ell">这里是商品的标题文字长了可以隐藏的哦</h5>
            <p class="price"><span class="now-price">￥1999.00</span> <span class="original-price">￥2400.00</span></p>
        </header>
        <div class="choose">
           <ul>
               <li class="item fix">
                   <span class="keyword">颜色</span> <a href="javascript:;" class="type on">白色</a><a href="javascript:;" class="type">白色</a>
               </li>
               <li class="item fix">
                   <span class="keyword">尺码</span> <a href="javascript:;" class="type">白色</a><a href="javascript:;" class="type">白色</a>
               </li>
               <li class="item fix num-item">
                    <span class="keyword">数量</span>
                    <div class="choose-num">
                        <a href="javascript:;" class="subs"><i class="icon icon-subs"></i> </a>
                        <span class="input"><input type="text" value="1" /> </span>
                        <a href="javascript:;" class="add"><i class="icon icon-add"></i> </a>
                    </div>
                   <span class="less">剩余库存：632</span>
               </li>
           </ul>
        </div>
        <footer>
            <a href="javascript:;" class="buy-btn-1">确认购买</a>
        </footer>
    </div>
</section>

</body>
</html>
